<template>
  <modal ref="modal_2"
         :title="title"
         :isCloseConfirm="false"
         top="5%"
         width="50%"
         height="50%"
         :close-on-click-modal="false"
         @modalOpened="opened"
         @modalClose="close">
    <basic-container>
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               v-model:page="page"
               v-model:search = "search"
               :permission="permissionList"
               v-model="form"
               ref="crud"
               @sort-change="sortChange"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @row-dblclick="dblclick"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
    </avue-crud>
    </basic-container>
      <template #footerButton>
        <!--<el-button type="primary" icon="el-icon-plus"  @click="handleSubmit">确定</el-button>-->
        <el-button icon="el-icon-circle-close" @click="$refs.modal_2.handleClose()">关闭</el-button>
      </template>
  </modal>
</template>

<script>
  import {getNewList, getDetail, add, update, remove} from "@/api/anwise/material/material";
  import {mapGetters} from "vuex";

  export default {

    data() {
      return {
          emits: ["success"],
          title:"选择物料",
          form: {},
          query: {},
          loading: true,
          dateFormat: 'YYYY-MM-DD',
          pickerOptions: {},
          page: {
              pageSize: 20,
              currentPage: 1,
              total: 0
          },
          search:{},
          selectionList: [],
          option: {
              height:'400px',
              // calcHeight: 30,
              tip: false,
              searchShow: true,
              searchMenuSpan: 6,
              searchSpan:8,
              border: true,
              index: true,
              selection: false,
              labelWidth: 150,
              menuWidth: 120,
              menu:false,
              indexWidth:100,
              addBtn: false,
              editBtn: false,
              viewBtn: false,
              delBtn: false,
              stripe: true,
              searchIndex: 3,
              searchIcon: false,
              searchEnter:true,
              column: [
                  {
                      label: "物料编号",
                      prop: "materialNo",
                      type: "input",
                      search: true,
                      overHidden: true,
                      sortable: true,
                      fixed: true,
                      rules: [{
                          required: true,
                          message: "请输入物料编号",
                          trigger: "blur"
                      }],
                  },
                  {
                      label: "物料名称",
                      prop: "materialName",
                      type: "input",
                      search: true,
                      overHidden: true,
                      sortable: true,
                      rules: [{
                          required: true,
                          message: "请输入物料名称",
                          trigger: "blur"
                      }],
                  },
                  {
                      label: "类别",
                      prop: "type",
                      type: "select",
                      filterable:true,
                      search: true,
                      overHidden: true,
                      sortable: true,
                      dicUrl: "/blade-system/dict-biz/dictionary?code=material_s_type",
                      width:120,
                      props: {
                          label: 'dictValue',
                          value: 'dictKey',
                      },
                      dataType: 'string',
                      rules: [{
                          required: true,
                          message: "请选择类别",
                          trigger: "blur"
                      }],
                  },
              ]
          },
        data: []
      };
    },
    computed: {
      ...mapGetters(["permission"]),
      permissionList() {
        return {
          addBtn: this.validData(this.permission.bom_list_add, false),
          viewBtn: this.validData(this.permission.bom_list_view, false),
          delBtn: this.validData(this.permission.bom_list_delete, false),
          editBtn: this.validData(this.permission.bom_list_edit, false)
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach(ele => {
          ids.push(ele.id);
        });
        return ids.join(",");
      }
    },
    methods: {
        selectionLoad() {
            let arr = [];
            // console.log(this.selectionList);
            // if (this.selectionList && this.selectionList != null
            //     && this.selectionList.length > 0) {
            //     this.data.forEach(row => {
            //         if(this.selectionList.some((val) => val.id=== row.id)) {
            //             console.log("row.id1+"+row.id)
            //             arr.push(row);
            //         }
            //     })
            // } else {
              console.log(this.data,this.arrayList);
                if (this.arrayList) {
                    this.data.forEach(row => {
                        if(this.arrayList.some((val) => val.id=== row.id)) {
                            console.log("row.id2+"+row.id)
                            arr.push(row);
                        }
                    })

                }
            // }
            this.$nextTick(() => {
                arr.forEach(item => {
                    // this.$refs.crud.clearSelection();
                    console.log("check"+item.id)
                    this.$refs.crud.toggleRowSelection(item, true);
                })
            })
        },
        showSelect() {
          this.$refs.modal_2.show();
          // this.onLoad(this.page);
        },
        clearData() {
            this.data = [];
            this.page.currentPage = 1;
        },
        clearSelection() {
            this.selectionList = [];
            this.arrayList = [];
            this.$refs.crud.toggleSelection();
        },
        searchReset() {
            this.query = {};
            this.onLoad(this.page);
        },
        searchChange(params, done) {
            this.query = params;
            this.page.currentPage = 1
            this.onLoad(this.page, params);
            done();
        },
        /** 双击选中*/
        dblclick(row) {
            this.$emit("success",row);
            this.$refs.modal_2.hide()
        },
        /**
         * 提交成功之后
         */
        submitAfter() {
            this.$refs.modal_2.hide()
        },
        handleSubmit() {
            console.log("setBankList")
            console.log(this.selectionList)
            this.$refs.modal_2.hide();
            this.$emit("setBankList",this.selectionList);

            // if (this.isAdd) {
            //   this.$refs.modal_2.handleClose()
            //   // this.$emit("success", this.selectionList);
            // } else if (this.isListAdd) {
            //
            //   // this.$emit("success", this.versionId, this.selectionList);
            // }
        },
        sortChange(val) {
            console.log(val)
            this.sort = {
                prop: val.prop,
                order: val.order
            };
            let order = "";
            if (this.sort.prop && this.sort.order) {
                if (this.sort.order === "descending") {
                    order = `${this.sort.prop} desc`
                } else {
                    order = `${this.sort.prop} asc`
                }
            }
            this.query.orderBy = order;
            this.onLoad(this.page);
        },





        opened() {
          //  this.onLoad(this.page);
        },
        close() {
            this.clearData();
            this.clearSelection();
        },


      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },

      sizeChange(pageSize){
        this.page.pageSize = pageSize;
      },
        refreshChange() {
            this.onLoad(this.page, this.query);
        },
      onLoad(page, params = {}) {
        this.loading = true;
          params.isBomList = 1;
          getNewList(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
          // this.selectionLoad();
          this.selectionClear();
        });
      },
        handleDatePickerChange(value) {
            console.log(this.search);
        },
    }
  };
</script>

<style>
  ::v-deep .el-table__row {
    height: 30px !important;
  }
  ::v-deep  .el-table__cell{
    padding:  5px !important;
  }

</style>
